/*
 * @Author: 肖思汗 
 * @Date: 2020-03-09 18:09:32 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-05-30 02:56:42
 */

import xrt_util from "../xrt_util/xrt_util";
import * as THREE from "three";

export default class TextTexture extends THREE.Texture {

    constructor() {

        super(TextTexture.canvas);

        TextTexture.canvas.width = 512;

        TextTexture.canvas.height = 512;

        if (TextTexture.context) {

            TextTexture.context.font = "60px arial"; // 字号和字体

            TextTexture.context.fillStyle = "#000000"; // 颜色

            TextTexture.context.textAlign = "left"; // 对齐
        }

        Object.defineProperties(this, {
            version: {
                set(v) { },
                get() {

                    if (
                        xrt_util.IS_DEV || // 开发模式中中需要每次都更新才能把纹理同时载入渲染器 和调试渲染器中
                        this.width !== this._.width ||
                        this.height !== this._.height ||
                        this.text !== this._.text ||
                        this.fontSize !== this._.fontSize ||
                        this.color !== this._.color ||
                        this.textAlign !== this._.textAlign ||
                        this.fontFamliy !== this._.fontFamliy ||
                        !this.startPosition.equals(this._.startPosition)
                    ) {

                        this._.startPosition.copy(this.startPosition);
                        this._.width = this.width;
                        this._.height = this.height;
                        this._.text = this.text;
                        this._.fontSize = this.fontSize;
                        this._.color = this.color;
                        this._.textAlign = this.textAlign;
                        this._.fontFamliy = this.fontFamliy;

                        TextTexture.canvas.width = this.width;

                        TextTexture.canvas.height = this.height;

                        if (TextTexture.context) {

                            TextTexture.context.clearRect(0, 0, this._.width, this._.height);

                            TextTexture.context.font = `${this.fontSize}px ${this.fontFamliy || "arial"}`;

                            TextTexture.context.fillStyle = this.color;

                            TextTexture.context.textAlign = this._.textAlign;
                        }

                        this._.text.split("\n").map((t: string, i: number) => {
                            if (TextTexture.context) {
                                TextTexture.context.fillText(t, this.startPosition.x, ((i + 1) * this.fontSize) + this.startPosition.y);
                            }
                        });


                        return this._.version++;
                    }

                    return this._.version;
                }
            }
        }); // defineProperties

    } // constructor

    static canvas = document.createElement("canvas");

    static context = TextTexture.canvas.getContext("2d");

    isTextTexture = true;

    format = THREE.RGBAFormat; // 图片格式

    startPosition = new THREE.Vector2(0, 0); // 文字的起始位置

    width = 512; // 纹理宽度

    height = 512; // 纹理高度

    text = "textTexture\n文本纹理";

    fontSize = 60;

    color = "#ff0000"; // 颜色

    textAlign = "left"; // 对齐

    fontFamliy = "arial"; // 字体

    _ = {
        version: 1,
        startPosition: new THREE.Vector2(0, 0), // 文字的起始位置
        width: 512, // 纹理宽度
        height: 512, // 纹理高度
        text: "",
        fontSize: 60,
        color: "#000000", // 颜色
        textAlign: "left" // 对齐
    }

}

